<!--  -->
<template>
  <div class="search">
        <HeaderTop title="搜索"></HeaderTop>
        <form class="search_form" @submit.prevent="clickSearch">
          <input type="search" name="search" placeholder="请输入商家或美食名称" class="search_input">
          <button class="search_submit">提交</button>
        </form>
    <AlertTip :alertText="alertText" v-show="alertShow" @closeTip="closeTip"></AlertTip>
  </div>
</template>

<script>
import HeaderTop from "../../components/HeaderTop/HeaderTop.vue"
//1:引入提示框组件
import AlertTip from "../../components/AlertTip/AlertTip.vue"
export default {
  data () {
    return {
      alertText:"",   //提示框中显示文本
      alertShow:false,//提示框是否显示控制变量
    };
  },

  components: {
    HeaderTop,
    //注册使用提示组件
    AlertTip
  },

  computed: {},

  methods: {
    //关闭[隐藏]提示框组件
    closeTip(){
      this.alertShow = false;   //隐藏提示框组件
      this.alertText = "";      //清除提示文字    
    },
    //显示提示框组件
    showAlert(alertText){
       this.alertText = alertText;   //将参数字符串赋值
       this.alertShow = true;        //显示框
    },
    clickSearch(){
      this.showAlert("目前商家,商品数据较少,暂未开放搜索功能")
    }
  }
}

</script>
<style lang='stylus' rel='stylesheet/stylus' scoped>
@import "../../common/stylus/minxns.styl"
.search  //搜索
          width 100%
          .search_form
            clearFix()
            margin-top 45px
            background-color #fff
            padding 12px 8px
            input
              height 35px
              padding 0 4px
              border-radius 2px
              font-weight bold
              outline none
              &.search_input
                float left
                width 79%
                border 4px solid #f2f2f2
                font-size 14px
                color #333
                background-color #f2f2f2
            .search_submit
              float right
              width 18%
              border 4px solid #02a774
              font-size 16px
              color #fff
              background-color #02a774
</style>